<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tic Tac Toe</title>
        <style type="text/css">
			#xTemp, #oTemp{display: none;}
			#xTemp{background-color:green;}
			#oTemp{background-color:red;}
			td 
			{
				height: 150px;
				width: 150px;
				text-align: center;
				font-size:80px;
			}
			body{background-color:#AFFEAB;}
		</style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
			var randomnumber = Math.floor(Math.random()*2)
			var turn1 = "";
			var turn = "x";
			if(randomnumber == 1){
				turn = "x" 
				turn1 = "X";
			}else{
				turn = "o" 
				turn1 = "O";
			}
			$(document).ready(function()
			{
				$("td").click(function()
				{
					if($(this).html() != "&nbsp;") return;
					$(this).html($("#" + turn + "Temp").html());
					turn = turn == "x" ? "o" : "x";
				});
			});
		</script>
    </head>
    
    <body>
    	<span style="padding-left:300px"><font size="+2" style="background-color:#AEB7FF"> Tic Tac Toe </font></span> <br />
        <span style="padding-left:265px">
        	<b><font style="background-color:#EC7171">Player 1:</b></span>
			<script type="text/javascript"> document.write(turn1); </script></font>
        <span style="padding-left:30px">
        	<b><font style="background-color:#F8F">Player 2:</b></span>
			<script type="text/javascript"> document.write(turn1 = turn1 == "X" ? "O" : "X"); </script></font><br />
    	<table width="50%" border="5" bgcolor="#666666">
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
          <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
        </table>
        <div id="xTemp" style="color:red">X</div>
        <div id="oTemp" style="color:green">O</div>
        <FORM>
            <span style="padding-left:310px">
            	<INPUT TYPE="button" onClick="history.go(0)" VALUE="Clear Board">
            </span>
        </FORM>
    </body>
</html>
